<template>
  <el-dialog
    v-model="visible"
    :width="screenWidth"
    :fullscreen="mobile === 'mobile'"
    :title="dialogHistory.title"
    draggable
    :close-delay="200"
    close-icon="CloseBold"
    @close="closeDialog"
  >
    <div class="app-container">
      <div class="search-container">
        <el-form ref="queryFormRef" :model="queryParams" :inline="true">
          <el-form-item label="关键字" prop="keywords">
            <el-input
              v-model="queryParams.keywords"
              placeholder="请输入关键字"
              clearable
              style="width: 200px"
              @keyup.enter="handleQuery"
            />
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="handleQuery"><i-ep-search />搜索</el-button>
            <el-button @click="resetQuery">
              <i-ep-refresh />
              重置</el-button
            >
          </el-form-item>
        </el-form>
      </div>

      <!--      <el-card shadow="never">-->
      <el-table v-loading="loading" :data="tableList" highlight-current-row border height="400">
        <el-table-column label="序号" type="index" width="60" align="center"></el-table-column>
        <el-table-column key="name" label="命令名称" align="center" prop="name" width="260" />
        <el-table-column key="isAuto" label="下发类型" align="center" width="90" prop="isAuto">
          <template #default="scope">
            <el-tag :type="scope.row.isAuto ? '' : 'warning'">{{ scope.row.isAuto ? "自动" : "手动" }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column key="messageId" label="消息id" align="center" prop="messageId" width="300" />
        <!-- <el-table-column
					key="deviceCode"
					label="设备编码"
					align="center"
					width="160"
					prop="deviceCode"
				>
				</el-table-column> -->
        <el-table-column key="status" label="下发状态" align="center" width="90" prop="status">
          <template #default="scope">
            <el-tag v-if="scope.row.status === 0" type="info">待下发</el-tag>
            <el-tag v-if="scope.row.status === 1">已下发</el-tag>
            <el-tag v-if="scope.row.status === 2">已回调</el-tag>
          </template>
        </el-table-column>
        <el-table-column key="jobs" label="下发命令" align="center" width="90" prop="jobs">
          <template #default="scope">
            <el-button type="primary" link size="small" @click="openDialog(scope.row.jobs)"> 查看 </el-button>
          </template>
        </el-table-column>
        <el-table-column key="resultMsg" label="返回结果" align="center" width="90" prop="resultMsg">
          <template #default="scope">
            <el-button
              v-if="scope.row.resultMsg !== null"
              type="primary"
              link
              size="small"
              @click="openDialog(scope.row.resultMsg)"
            >
              查看
            </el-button>
          </template>
        </el-table-column>
        <el-table-column key="result" label="返回状态" align="center" width="90" prop="result"> </el-table-column>
        <el-table-column key="createTime" label="创建时间" align="center" width="160" prop="createTime">
        </el-table-column>
        <el-table-column key="distributeTime" label="下发时间" align="center" width="160" prop="distributeTime">
        </el-table-column>
        <el-table-column key="resultTime" label="返回时间" align="center" width="160" prop="resultTime">
        </el-table-column>
      </el-table>

      <pagination
        v-if="total > 0"
        v-model:total="total"
        v-model:page="queryParams.pageNum"
        v-model:limit="queryParams.pageSize"
        @pagination="handleQuery"
      />
      <!--      </el-card>-->
    </div>
  </el-dialog>

  <el-dialog
    v-model="dialog.visible"
    :title="dialog.title"
    :width="screenWidth"
    :fullscreen="mobile === 'mobile'"
    class="system"
    style="width: 500px; height: 400px"
    close-icon="CloseBold"
    draggable
  >
    <el-form label-width="100px">
      <el-input v-model="jobConten" disabled type="textarea" :autosize="{ minRows: 8, maxRows: 20 }" />
    </el-form>
  </el-dialog>
</template>

<script lang="ts" setup>
import { ref, reactive, toRaw, computed } from "vue";
import { issueCommandLogPage } from "@/api/system/device";
import { ParamsType, CheckinDeviceCommandLogListForm } from "@/api/system/device/types";
import { getDicts } from "@/store/modules/dict";

import { useScreen } from "@/store/modules/screen";

const screenStore = useScreen();
const mobile = computed(() => screenStore.device);
const screenWidth = ref(1400);
const dialog = reactive<DialogOption>({
  visible: false,
});
function initScreen() {
  if (mobile.value === "mobile") {
    screenWidth.value = screenStore.screenWidth;
  } else {
    screenWidth.value = 1400;
  }
}

const emit = defineEmits(["sendHistoryClose"]);
const instance = getCurrentInstance();
let { proxy, ctx } = instance;
const props = defineProps({
  dialogHistory: {
    type: Object,
    default: () => ({
      visible: false,
      title: "命令下发记录",
      code: 0,
    }),
  },
});
const visible = ref(props.dialogHistory.visible);
let loading = ref(false);

const queryFormRef = ref<ElForm>();
const tableList = ref<CheckinDeviceCommandLogListForm[]>();
const queryParams = reactive<ParamsType>({
  pageNum: 1,
  pageSize: 20,
  deviceCode: props.dialogHistory.code,
});
let total = ref(0);
const jobConten = ref("");
/* 发送关闭信息并返回选择信息 */
function sendHistoryClose() {
  emit("sendHistoryClose");
}

/**
 * 关闭弹窗
 */
function closeDialog() {
  visible.value = false;
  sendHistoryClose();
}

function openDialog(content: string) {
  jobConten.value = content;
  dialog.visible = true;
  dialog.title = "命令详情";
  // alert(content);
}

/**
 * 重置表单
 */
function resetForm() {
  queryFormRef.value.resetFields();
  queryFormRef.value.clearValidate();
}

/* 列表查询 */
async function handleQuery() {
  loading.value = true;
  let list = await issueCommandLogPage(queryParams);
  if (list.type === 0) {
    if (list.success) {
      tableList.value = list.data.list;
      queryParams.pageNum = list.data.pageNum;
      queryParams.pageSize = list.data.pageSize;
      total.value = list.data.total;
    } else {
      ElMessage.error(list.msg);
    }
  } else {
    ElMessage.error(list.msg);
  }
  loading.value = false;
}

/**
 * 重置查询
 */
function resetQuery() {
  queryFormRef.value.resetFields();
  queryParams.pageNum = 1;
  queryParams.pageSize = 20;
  // queryParams.code = props.dialogHistory.code;
  handleQuery();
}

onMounted(() => {
  initScreen();

  handleQuery();
});

onUnmounted(() => {
  // closeDialog();
  // resetForm()
});

function genderFilter(genderValue) {
  let tempgender = gender.filter((item) => item.value === genderValue);
  if (tempgender[0] && tempgender[0].label) {
    return tempgender[0].label;
  } else {
    return "";
  }
}
const gender = getDicts("gender"); //性别
</script>

<style lang="less" scoped>
.app-container {
  padding: 0px;
}
</style>
